import QtQuick 2.15
import QtQuick.Controls
import "../components"

Item {
    id: findMusicPage
    anchors.fill: parent
    property var theme: p_theme.currentTheme()
    property double fontSize: 11
    property int active: 0
    property var headerData: [
        {
            "m_text": "歌单",
            "qml": "../content/FindMusicContent.qml"
        },
        {
            "m_text": "最新音乐",
            "qml": "../content/NewMusicContent.qml"
        },
        {
            "m_text": "个性推荐",
            "qml": "../content/RecommendationsContent.qml"
        },
        {
            "m_text": "专属定制",
            "qml": ""
        }
    ]
    Rectangle {
        id: findMusicHeader
        property double tbPadding: 16
        property double lrPadding: 35
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 16
        radius: height / 2
        color: "#1F" + theme.subBackgroundColor2
        Row {
            anchors.centerIn: parent
            Repeater {
                model: ListModel {}
                delegate: findMusicHeaderDelegate
                Component.onCompleted: {
                    model.append(findMusicPage.headerData);
                }
                onCountChanged: {
                    let w = 0, h = 0;
                    for (var i = 0; i < count; i++) {
                        w += itemAt(i).width;
                        if (h < itemAt(i).height) {
                            h = itemAt(i).height;
                        }
                    }
                    findMusicHeader.width = w;
                    findMusicHeader.height = h;
                }
            }
        }
        Component {
            id: findMusicHeaderDelegate
            Rectangle {
                color: `#${active == index ? 'FF' : '00'}` + theme.subBackgroundColor2
                width: children[0].contentWidth + findMusicHeader.lrPadding
                height: children[0].contentHeight + findMusicHeader.tbPadding
                radius: height / 2
                Text {
                    anchors.centerIn: parent
                    font.pointSize: fontSize
                    // color: theme.fontColor
                    text: m_text
                    color: active == index ? "white" : theme.fontColor
                    Behavior on color {

                        ColorAnimation {
                            duration: 200
                            easing.type: Easing.InOutBounce
                        }
                    }
                }
                Behavior on color {

                    ColorAnimation {
                        duration: 200
                        easing.type: Easing.InOutBounce
                    }
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        active = index;
                    }
                }
            }
        }
    }

    Item {
        id: fintPageContentItem
        width: parent.width * 0.95
        height: findMusicPage.height - anchors.topMargin - findMusicHeader.anchors.topMargin - findMusicHeader.height - anchors.bottomMargin
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: findMusicHeader.bottom
        anchors.topMargin: 14
        anchors.bottomMargin: 6
        clip: true

        // ScrollBar.vertical: CScrollBar{
        //     id: fintPageContentScrollBar
        // }
        Loader {
            anchors.fill: parent
            source: findMusicPage.headerData[findMusicPage.active].qml
            onStatusChanged: {
                if (status === Loader.Ready) {
                    item.parent = parent;
                    // fintPageContentItem.contentHeight = Qt.binding(()=>item?.height||0)
                }
            }
        }
    }
}
